/**
 * Created by rongyao on 2017/11/15.
 */
import React from 'react'
import {Link} from 'react-router'
import {Provider, connect} from 'react-redux'
import {fetchComment,AddComment} from '../../actions/counter'
import "./newsDetail.scss"
class NewsDetail extends React.Component{
	componentDidMount(){
		var id = JSON.parse(localStorage.detail)._id;
		console.log(id);
		this.props.fetchComment(id)
	}
	commentHandle(){
		var data = {};
		data.comment = $("#comInp").val();
		data.cateId = JSON.parse(localStorage.detail)._id;
		data.commentator = "ye";
		this.props.AddComment(data)
	}
	render(){
		var {newsList,commentList,fetchComment} = this.props;
		var index = this.props.params.index-0;
		// console.log(commentList);
		var commentCount = 0;
		if(commentList.rows&&commentList.rows.length>0){
			commentCount  = commentList.rows.length;
			var commentf = commentList.rows.map(function (val, idx) {
				return (
					<li className="listComment" key={idx}><p className="zuo">{val.comment}</p><span className="goodClick">点赞</span></li>
				)
			})
		}
		if(newsList.rows&&newsList.rows.length>0){
			localStorage.detail = JSON.stringify(newsList.rows[index])
		}
		// console.log(newsList);
		var imgUrl = "http://localhost:3000/"+JSON.parse(localStorage.detail).pic.filename
		console.log(imgUrl);
		return(
			<div className="container">
				<div className="row" style={{margin:'20px'}}>
					<div className="col-md-5" style={{textAlign:'center'}}>
						<img className="imga" src={imgUrl} alt="ndvfhipnevjfio"/>
					</div>
					<div className="col-md-7">
						<h3 className="cont">
							{JSON.parse(localStorage.detail).title}
						</h3>
						<div className="newsDetail">
							{JSON.parse(localStorage.detail).content}
						</div>
					</div>
				</div>
				
				
				<div className="comment row">
					<div className="input-group">
						<input id="comInp" type="text" className="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
							<span className="input-group-addon" id="basic-addon2" onClick={this.commentHandle.bind(this)}>评论</span>
					</div>
					<div>
						<div className="row">
							<h4 className="col-md-10 checkCom" style={{marginTop:'50px'}}>查看评论</h4>
							<p  className="col-md-2" style={{marginTop:'50px'}}>评论数:{commentCount}</p>
						</div>
						<hr/>
						<ul>
							{commentf}
						</ul>
					</div>
					
				</div>
			</div>
		)
	}
}

const getValue = (state) => {
	return {
		newsList: state.newsList,
		cateList: state.cateList,
		commentList: state.commentList
	}
}
const NewsDetailContext = connect(
	getValue,
	{fetchComment,AddComment}
)(NewsDetail)
module.exports=NewsDetailContext;